<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/Vipshop-homepage.css">
    <link rel="stylesheet" href="mui/css/mui.min.css">
    <link rel="stylesheet" href="http:////at.alicdn.com/t/font_2867324_n5b44qpnio7.css">
</head>

<body>
    <!-- 下载APP -->
    <div class="download">
        <div class="downloadApp">
            <div class="deleteButton">
                <span class="iconfont icon-shanchu2"></span>
            </div>
            <div class="downloadText">
                <p class="downloadTitle">品牌特卖 就是超值</p>
                <p class="downloadBottom">早10晚8准点上新，7天放心退</p>
            </div>
        </div>
        <div class="downloadPrivacy">
            <span class="edition">开发者：广州唯品会信息科技有限公司&nbsp;&nbsp;版本号：v7.54.7</span>
            <span class="Privacy">
                <a href="#">权限</a>
                <span>|</span>
                <a href="#">隐私</a>
            </span>
        </div>
    </div>
    <!-- 输入框 -->
    <div class="headerContainer">
        <div class="headerTitle">
            <div class="headerLogo">
                <img src=""
                    alt="">
                <i></i>
                <span>品牌特卖·100%正品</span>
            </div>
            <div class="headerLogin">
                <span>登录</span>
                <a href="#"></a>
            </div>
        </div>
        <div class="search">
            <input type="search" placeholder="女式大衣">
        </div>
        <div class="tab">
            <ul>
                <li>推荐
                    <span></span>
                </li>
                <li>3折疯抢</li>
                <li>唯品快抢</li>
                <li>国际</li>
            </ul>
        </div>
    </div>
    <!-- 内容 -->
    <div class="container">
        <!-- 超级大牌日 -->
        <div class="endorsement">
            <img src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2021/10/18/123/1634522648238_750x517_90.jpg"
                alt="">
            <ul>
                <li><img src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2021/10/15/130/1634301181760_228x312_90.png"
                        alt=""></li>
                <li><img src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2021/10/15/17/1634301186021_228x312_90.png"
                        alt=""></li>
                <li><img src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2021/10/15/98/1634301190584_228x312_90.png"
                        alt=""></li>
            </ul>
        </div>
        <!-- 三折疯抢 -->
        <div class="rushToBuy">
            <div class="rushTop
           "><img src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2021/09/18/86/1631962609274_750x17_90.png"
                    alt=""></div>
            <div class="rushContainer">
                <div class="rushTitle">
                    <span>好货疯抢中</span>
                    <div class="list">
                        <img src="https://h2.appsimg.com/a.appsimg.com/upload/brandcool/0/ceb67873ad4e4c19bf5c153257d5e7b9/10001211/primary_90x45_90.png"
                            alt="">
                        <span>茵曼</span>
                        <span>3折封顶</span>
                    </div>
                    <div class="list">
                        <img src="https://h2.appsimg.com/a.appsimg.com/upload/brandcool/0/bd3aeb1d0993475b937adc00b6fd069a/10003960/primary_90x45_90.png"
                            alt="">
                        <span>回力</span>
                        <span>3折封顶</span>
                    </div>
                    <div class="list">
                        <img src="https://h2.appsimg.com/a.appsimg.com/upload/brandcool/0/de22752993af410d8089c1e27b006935/10000773/primary_90x45_90.png"
                            alt="">
                        <span>暇步士</span>
                        <span>3折封顶</span>
                    </div>
                    <div class="list">
                        <img src="https://h2.appsimg.com/a.appsimg.com/upload/brandcool/0/e4174d38c3444d499181d14112f71e00/10001372/primary_90x45_90.png"
                            alt="">
                        <span>果壳</span>
                        <span>3折封顶</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 唯品快抢 -->
        <div class="rushToBuy grab">
            <div class="rushContainer rob">
                <div class="rushTitle">
                    <span>天天低价</span>
                    <div class="list">
                        <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2021/03/17/106/ias_04c17b47423d061da072011460037295_122x122_90.png"
                            alt="">
                        <span>¥19.9</span>
                        <span>¥99</span>
                    </div>
                    <div class="list">
                        <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2021/04/22/37/ias_56e08d047012eac63819bcf8c528789d_122x122_90.png"
                            alt="">
                        <span>¥29</span>
                        <span>¥59</span>
                    </div>
                    <div class="list">
                        <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2021/06/22/138/ias_6f2bd676bd76ee015c427dbee99ac0f7_122x122_90.png"
                            alt="">
                        <span>¥26</span>
                        <span>¥49.9</span>
                    </div>
                    <div class="list">
                        <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2021/03/17/106/ias_04c17b47423d061da072011460037295_122x122_90.png"
                            alt="">
                        <span>¥18</span>
                        <span>¥69</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 今日特卖 -->
        <div class="sale">
            <img src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2021/09/03/163/1630672134888_750x378_90.png"
                alt="">
            <div class="list">
                <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2021/03/31/91/ias_d19e1dcefa257af802faae147a3fbde5_160x160_90.png"
                    alt="">
                <img src="https://h2.appsimg.com/a.appsimg.com/upload/brandcool/0/3b468b645b234734836d32d184bb9a9b/10000495/primary_70x35_90.png"
                    alt="">
                <span>¥166</span>
                <span>¥699</span>
            </div>
            <div class="list">
                <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2021/03/28/121/ias_e7ab09494d87db21fc60dc4b001f3908_160x160_90.png"
                    alt="">
                <img src="https://h2.appsimg.com/a.appsimg.com/upload/brandcool/0/9c1a1b93bf604814b1bd8ebe589b04c2/10007186/primary_70x35_90.png"
                    alt="">
                <span>¥369</span>
                <span>¥890</span>
            </div>
            <div class="list">
                <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2021/04/09/17/ias_c1334d9b59c155a7e1a3b077133f62f8_160x160_90.png"
                    alt="">
                <img src="https://h2.appsimg.com/a.appsimg.com/upload/brandcool/0/3ccd836975e4471992b1dd58c25145bf/10000630/primary_70x35_90.png"
                    alt="">
                <span>¥256</span>
                <span>¥449</span>
            </div>
            <div class="list">
                <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2021/04/20/17/ias_dfeb5b19dc7e1f4908ea4814e0652dcc_160x160_90.png"
                    alt="">
                <img src="https://h2.appsimg.com/a.appsimg.com/upload/brandcool/0/LOGO/16179486396480349b/primary_70x35_90.png"
                    alt="">
                <span>¥598</span>
                <span>¥698</span>
            </div>
        </div>
        <!-- 商品列表 -->
        <div class="img">
            <img src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2021/10/19/13/1634608768242_750x126_90.png"
                alt="">
        </div>
        <div class="containerList">
            <div class="mui-card list">
                <!--内容区-->
                <div class="mui-card-content">
                    <img src="https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2021/09/02/0/ias_d9d69a7e891df89c3da655f3819d16a7_1135x545_85.jpg"
                        alt="">
                </div>
                <!--页脚，放置补充信息或支持的操作-->
                <div class="mui-card-footer">
                    <p class="listTitle">
                        <span>HELLO KITTY母婴鞋服专场</span>
                    </p>
                    <p class="listPrice">
                        <span>1.1</span>
                        <span>折起</span>
                    </p>
                </div>
            </div>
            <div class="mui-card list">
                <!--内容区-->
                <div class="mui-card-content">
                    <img src="https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2021/10/18/38/ias_163452348687148_1135x545_85.jpg"
                        alt="">
                </div>
                <!--页脚，放置补充信息或支持的操作-->
                <div class="mui-card-footer">
                    <p class="listTitle">
                        <span>欧莱雅Loreal大牌日专场</span>
                        <span>剩2天</span>
                    </p>
                    <p class="listPrice">
                        <span>3.7</span>
                        <span>折起</span>
                    </p>
                </div>
            </div>
            <div class="mui-card list">
                <!--内容区-->
                <div class="mui-card-content">
                    <img src="https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2021/10/10/1/ias_d25bf117f4af06ea547a060739bf3965_1135x545_85.jpg"
                        alt="">
                </div>
                <!--页脚，放置补充信息或支持的操作-->
                <div class="mui-card-footer">
                    <p class="listTitle">
                        <span>斯凯奇SKECHERS运动户外专场</span>
                    </p>
                    <p class="listPrice">
                        <span>2.4</span>
                        <span>折起</span>
                    </p>
                </div>
            </div>
            <div class="mui-card list">
                <!--内容区-->
                <div class="mui-card-content">
                    <img src="https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2021/10/09/3/ias_262fbefc8aa9d946b893b790cae3b440_1135x545_85.jpg"
                        alt="">
                </div>
                <!--页脚，放置补充信息或支持的操作-->
                <div class="mui-card-footer">
                    <p class="listTitle">
                        <span>DKNY女装专场</span>
                    </p>
                    <p class="listPrice">
                        <span>3.5</span>
                        <span> 折封顶</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- 购物车 -->
    <div class="shoppingCar">
        <i class="iconfont icon-gouwuchekong"></i>
    </div>
    <!-- 返回顶部 -->
    <div class="goTop">
        <i class="iconfont icon-jiantou_xiangshang"></i>
    </div>

</body>
<script>
    // 在iphone6 375宽度中  html是以20px作为基本单位
    (function () {
        function w() {
            var all = document.documentElement;  // 获取html元素
            var test = all.getBoundingClientRect().width;  // 获取当前设备的宽度、
            console.log(123, test)
            if (test > 750) {
                test = 750;
            }
            rem = test / 18.75;
            console.log(rem)
            all.style.fontSize = rem + 'px'
        }
        w();
        window.addEventListener("resize", function () {
            w()
        }, false)
    })();

</script>

</html>